<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" type="text/css" href="../../css/mui.picker.css" />
		<link rel="stylesheet" href="../../css/mui.min.css" />
		<link href="../../css/mui.picker.css" rel="stylesheet" />
		<link href="../../css/mui.poppicker.css" rel="stylesheet" />
		<title></title>
	</head>
	<style>
		input {
			width: 100%;
		}
		
		label {
			padding: 1px;
			font-size: 15px;
		}
		
		.title {
			display: inline-block;
			margin-top: 10%;
			margin-left: 10%;
		}
		/*提示组件*/
		
		.info {
			padding: 20px 10px;
		}
		/*选择组件*/
		
		.mui-btn {
			font-size: 16px;
			padding: 8px;
			margin: 3px;
		}
		
		.gangwang a {
			color: grey;
		}
		
		.zhiju a {
			color: grey;
		}
		
		.mui-btn {
			font-size: 16px;
			padding: 8px;
			margin: 3px;
		}
		
		.ui-alert {
			text-align: center;
			padding: 20px 10px;
			font-size: 16px;
		}
		/*提交按钮*/
		
		.mui-content-padded {
			margin: 10px;
		}
	</style>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-back  mui-icon-backmui-pull-left"></a>
			<h1 class="mui-title title">在线下单</h1>
		</header>
		<div class="mui-content">
			<div class="mui-row">
				<div class="mui-col-xs-3 mui-col-sm-2">
					<div class="title">物料</div>
				</div>
				<div class="mui-col-xs-8 mui-col-sm-9">
					<form class="mui-input-group">
						<div class="mui-input-row">
							<label>数&nbsp;&nbsp;&nbsp;&nbsp;量</label>
							<input id="boardCountI" type="number" style="font-size: 15px;" placeholder="需要加工板子的数量" />
						</div>
						<div class="mui-input-row">
							<label style="width: 100%;">工艺材料</label>
						</div>
						<div class="processMaterial">
							<div class="mui-card">
								<div class="mui-input-row mui-checkbox process" id="1">
									<label>有铅锡膏</label>
									<input id="processMaterial1" value="1" type="checkbox">
								</div>
							</div>
							<div class="mui-card">
								<div class="mui-input-row mui-checkbox process" id="2">
									<label>无铅锡膏</label>
									<input id="processMaterial2" value="2" type="checkbox">
								</div>
							</div>
							<div class="mui-card">
								<div class="mui-input-row mui-checkbox process" id="4">
									<label>红胶</label>
									<input id="processMaterial3" value="4" type="checkbox">
								</div>
							</div>
						</div>
						<div class="mui-input-row">
							<label>贴装</label>
						</div>
						<form class="mui-input-group">
							<div class="mui-input-row mui-radio" id="danmian" value="0">
								<label>单面</label>
								<input name="mounting" value="0" type="radio" checked>
							</div>
							<div class="mui-input-row mui-radio" id="shuangmian" value="1">
								<label>双面</label>
								<input name="mounting" value="1" type="radio">
							</div>
						</form>

						<div class="mui-input-row g" style="display: none;">
							<label>钢网</label>
							<div style="margin-top: 10px;" class="gangwang">
								<a class="" id="100">由服务商提供</a>
								<a class="" id="111">自备</a>
								<input id="gangwangFile" style="display: none;" />
							</div>
						</div>
						<div class="mui-input-row z" style="display: none;">
							<label>冶具</label>
							<div style="margin-top: 10px;" class="zhiju">
								<a class="" id="1000">由服务商提供</a>
								<a class="" id="1111">自备</a>
								<input id="zhijuFile" style="display: none;" />
							</div>
						</div>

						<div style="display: none;">
							<p style="color: red;">注意事项：</p>
							<p>由服务商提供冶具需提供报告；工厂提供，使用后如需寄回请备注，否则默认寄存在平台</p>
							<label style="display: inline-block;text-align: center;margin-left: 30px;">包装静电气泡袋（默认）</label>
						</div>
					</form>
				</div>
			</div>
			<div class="mui-row">
				<div class="mui-col-xs-3 mui-col-sm-2">
					<div class="title">交期</div>
				</div>
				<div class="mui-col-xs-8 mui-col-sm-9">
					<ul class="mui-table-view mui-table-view-radio">
						<li id="jiao1" class="mui-table-view-cell">
							<a id="promptBtn1" class="mui-navigate-right">
								普通<span id="putong"> <!--这里面显示的是选择的时间--> </span>
							</a>
						</li>
						<li id="jiao2" class="mui-table-view-cell ">
							<a id="promptBtn2" class="mui-navigate-right ">
								加急<span id="jiaji"> <!--这里面显示的是选择的时间--> </span>
							</a>
						</li>
						<!--使用弹窗来显示所要选择的日期时间-->
					</ul>
					<div id="info" style="width: 250px;overflow: hidden;" class="info"></div>
					<input type="number" id="jiaoqi" style="display: none;" />
				</div>
			</div>
			<div class="mui-row">
				<div class="mui-col-xs-3 mui-col-sm-2">
					<div class="title">AOI</div>
				</div>
				<div class="mui-col-xs-8 mui-col-sm-9">
					<div class="mui-card">
						<form class="mui-input-group">
							<div class="mui-input-row mui-radio" id="quance" value="1">
								<label>全测</label>
								<input name="mounting" type="radio" checked>
							</div>
							<div class="mui-input-row mui-radio" id="chouce" value="0">
								<label>抽测</label>
								<input name="mounting" type="radio">
							</div>
						</form>
					</div>
				</div>
			</div>
			<div class="mui-row">
				<div class="mui-col-xs-3 mui-col-sm-2">
					<div class="title">物料代采</div>
				</div>
				<div class="mui-col-xs-8 mui-col-sm-9">
					<div class="mui-card">
						<form class="mui-input-group">
							<div class="mui-input-row mui-radio" id="wuliaoyes">
								<label>是</label>
								<input name="radio1" type="radio" checked>
							</div>
							<div class="mui-input-row mui-radio" id="wuliaono">
								<label>否</label>
								<input name="radio1" type="radio">
							</div>
						</form>
					</div>
				</div>
			</div>
			<div class="mui-row" id="wuliao">
				<div class="mui-col-xs-3 mui-col-sm-2">
					<div class="title">物料发出</div>
				</div>
				<div class="mui-col-xs-8 mui-col-sm-9">
					<div class="mui-content">
						<div class="mui-content-padded">
							<button id='pickDateBtn' type="button" class="mui-btn mui-btn-block">预计发出时间</button>
						</div>
						<div class="info" id="info1wuliao"></div>
					</div>
				</div>
			</div>

			<div class="mui-row">
				<div class="mui-col-xs-3 mui-col-sm-2">
					<div class="title">选择地址</div>
				</div>
				<div class="mui-col-xs-8 mui-col-sm-9">
					<select class="mui-btn mui-btn-block add" id="addresses">
					</select>
				</div>
			</div>
			<div class="mui-row">
				<div class="mui-col-xs-3 mui-col-sm-2">
					<div class="title">备注</div>
				</div>
				<div class="mui-col-xs-8 mui-col-sm-9">
					<div class="mui-input-row">
						<textarea id="textarea" rows="3" placeholder="简单输入描述" maxlength="500"></textarea>
					</div>
				</div>
			</div>
			<!--提交-->
			<div class="mui-row">
				<div class="mui-col-xs-6 mui-col-sm-6">
					<button id="fangqi" type="button" class="mui-btn mui-btn-danger mui-btn-block">放弃提交</button>
				</div>
				<div class="mui-col-xs-6 mui-col-sm-6">
					<button id="tijiao" type="button" class="mui-btn mui-btn-success mui-btn-block">提交订单</button>
				</div>
			</div>
		</div>

		<div class="from" style="display: none;">
			<!--板子数量-->
			<span id="boardCount"></span>
			<!--工艺材料-->
			<span id="processMaterial"></span>
			<!--贴装-->
			<span id="mounting">0</span>
			<!--钢网-->
			<span id="steelMeshId"></span>
			<!--治具-->
			<span id="jigId"></span>
			<!--交期-->
			<span id="deliveryTime"></span>
			<!--AOI测试-->
			<span id="aoi">1</span>
			<!--物料代采-->
			<span id="materialGeneration">0</span>
			<!--物料发出时间-->
			<span id="generationTime"></span>
			<!--收货地址-->
			<span id="receivingAddressId"></span>
		</div>
		<!--备注-->
		<span id="remark"></span>
	</body>
	<script src="../../js/mui.picker.js"></script>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/constatnt/var.js"></script>
	<script src="../../js/ipjs/ip.js"></script>
	<script src="../../js/myjs/localVarchar.js"></script>
	<script type="text/javascript">
		//填写天数
		var info = document.getElementById("info");
		var jiaoqi = document.getElementById("jiaoqi");
		var addresslenght = 0;
		document.getElementById("promptBtn1").addEventListener('tap', function(e) {
			e.detail.gesture.preventDefault();
			var btnArray = ['确定', '取消'];
			mui.prompt('输入您需要交期的天数', '/天', '尊敬的客户您好', btnArray, function(e) {
				if(e.index == 0) {
					if(!checkNum(e.value)) {
						alert("输入错误！");
						e.value = "";
						document.getElementById("jiao1").classList.remove("mui-selected");
						document.getElementById("jiao2").classList.remove("mui-selected");
					} else {
						info.innerText = '交期时间：' + e.value + "天";
						jiaoqi.value = e.value;
						var xiaoshi = parseInt(jiaoqi.value) * 24;
						document.getElementById("deliveryTime").innerHTML = xiaoshi;
					}

				} else {}
			})
		});
		//填写时间小时
		document.getElementById("promptBtn2").addEventListener('tap', function(e) {
			e.detail.gesture.preventDefault();
			var btnArray = ['确定', '取消'];
			mui.prompt('输入您需要交期小时', "8/24/48/72（/小时）", '尊敬的客户您好', btnArray, function(e) {
				if(e.index == 0) {
					if(!checkNum(e.value)) {
						alert("输入错误！请重新输入");
						e.value = "";
						document.getElementById("jiao1").classList.remove("mui-selected");
						document.getElementById("jiao2").classList.remove("mui-selected");
					} else {
						info.innerText = '交期时间：' + e.value + "小时";
						jiaoqi.value = e.value;
						document.getElementById("deliveryTime").innerHTML = jiaoqi.value;
					}
				} else {}
			});
		});

//     判断数字
		function checkNum(number) {
			var reg = /^[0-9]+.?[0-9]*$/;
			if(!reg.test(number)) {
				return false;
			}else{
				return true;
			}

		}

		//选择日期时间
		var info1wuliao = document.getElementById("info1wuliao");
		document.getElementById("pickDateBtn").addEventListener('tap', function() {
			var dDate = new Date();
			dDate.setFullYear(2014, 7, 16);
			var minDate = new Date();
			minDate.setFullYear(2010, 0, 1);
			var maxDate = new Date();
			maxDate.setFullYear(2016, 11, 31);
			plus.nativeUI.pickDate(function(e) {
				var d = e.date;
				info1wuliao.innerText = '预计发出日期:' + d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
				document.getElementById("generationTime").innerHTML = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
			}, function(e) {
				info1wuliao.innerText = "您没有选择日期";
			}, {
				title: "请选择日期",
				date: dDate,
				minDate: minDate,
				maxDate: maxDate
			});
		});

		//文件选择单选
		mui(".gangwang").on('tap', 'a', function(event) {
			delStyle(".gangwang a", "mui-btn-green");
			var idValue = this.getAttribute("id");
			var pop = document.getElementById(idValue);
			pop.classList.add('mui-btn-green');
		});
		mui(".zhiju").on('tap', 'a', function(event) {
			delStyle(".zhiju a", "mui-btn-green");
			var idValue = this.getAttribute("id");
			var pop = document.getElementById(idValue);
			pop.classList.add('mui-btn-green');
		});

		function delStyle(c, b) {
			mui(c).each(function() {
				var idValue = this.getAttribute("id");
				var pop = document.getElementById(idValue);
				pop.classList.remove(b)
			});
		}
		//初始物料隐藏
		document.getElementById("wuliao").classList.add("mui-hidden");
		//隐藏物料发出时间
		document.getElementById("wuliaoyes").addEventListener('tap', function() {
			//获取其点击id值
			document.getElementById("wuliao").classList.add("mui-hidden");
		});

		//显现物料发出时间
		document.getElementById("wuliaono").addEventListener('tap', function() {
			document.getElementById("wuliao").classList.remove("mui-hidden");
		});

		document.getElementById("fangqi").addEventListener('tap', function() {
			var btnArray = ['否', '是'];
			mui.confirm('您确定要放弃提交订单？', ' ', btnArray, function(e) {
				if(e.index == 1) {
					//清空表单
					mui(".from span").each(function() {
						this.innerHTML = "";
					});
					location.reload();
				}
			})
		});
		/*************填充数据*******************/
		//工艺材料
		var number = 0;
		var allCheckbox = document.querySelectorAll('.process input');
		document.getElementById("processMaterial1").addEventListener('change', function() {
			if(allCheckbox[0].checked) {
				number = number + 1;
			} else {
				number = number - 1;
			}
			document.getElementById("processMaterial").innerHTML = number;
		});

		document.getElementById("processMaterial2").addEventListener('change', function() {
			if(allCheckbox[1].checked) {
				number = number + 2;
			} else {
				number = number - 2;
			}
			document.getElementById("processMaterial").innerHTML = number;
		});

		document.getElementById("processMaterial3").addEventListener('change', function() {
			if(allCheckbox[2].checked) {
				number = number + 4;
			} else {
				number = number - 4;
			}
			document.getElementById("processMaterial").innerHTML = number;
		});

		//贴装
		document.getElementById("danmian").addEventListener('tap', function() {
			document.getElementById("mounting").innerHTML = this.getAttribute("value");
		});
		document.getElementById("shuangmian").addEventListener('tap', function() {
			document.getElementById("mounting").innerHTML = this.getAttribute("value");
		});
		//钢网文件选择

		//治具文件选择

		//交期,由上面的填充进去

		//填充aoi
		document.getElementById("quance").addEventListener('tap', function() {
			document.getElementById("aoi").innerHTML = 1;
		});
		document.getElementById("chouce").addEventListener('tap', function() {
			document.getElementById("aoi").innerHTML = 0;
		});
		//物料代采
		document.getElementById("wuliaoyes").addEventListener('tap', function() {
			document.getElementById("materialGeneration").innerHTML = 0;
		});
		document.getElementById("wuliaono").addEventListener('tap', function() {
			document.getElementById("materialGeneration").innerHTML = 1;
		});

		//填充默认数据
		//贴装
		document.getElementById("mounting").innerHTML = 0;
		//AOI
		document.getElementById("aoi").innerHTML = 1;
		//物料代采
		document.getElementById("materialGeneration").innerHTML = 0;

		//选择地址id
		mui.ajax(ip + '/address/selectAll/' + localStorage.getItem(LOCAL_USER_INFO), {
			type: 'get', //HTTP请求类型
			timeout: 10000, //超时时间设置为10秒
			headers: {
				'Content-Type': 'application/json'
			},
			success: function(data) {
				if(data.data.length == 0) {
					alert("请您添加收获地址");
					addresslenght = 0;
				}
				document.getElementById("receivingAddressId").innerHTML = data.data[0].id;
				//服务器返回响应，根据响应结果，分析是否登录成功；
				for(i = 0; i < data.data.length; i++) {
					document.querySelector("#addresses").innerHTML +=
						"<option class='op' value='" + data.data[i].id + "'>" +
						data.data[i].province + "-" + data.data[i].city + "-" + data.data[i].county +
						"</option>";
				}

			},
			error: function(xhr, type, errorThrown) {
				//异常处理
				mui.toast("系统异常！");
			}
		});
		document.getElementById("addresses").addEventListener('tap', function() {
			document.getElementById("receivingAddressId").innerHTML = this.value;
		})
		/*************填充数据*******************/
		document.getElementById("tijiao").addEventListener('tap', function() {
			//备注
			var remarkText = document.getElementById("remark").innerHTML;
			//板子数量
			var count = document.getElementById("boardCountI").value;
			document.getElementById("boardCount").innerHTML = count;
			//表单填充
			var flag = true;
			var orderInfo = {
				boardCount: document.getElementById("boardCount").innerHTML,
				processMaterial: document.getElementById("processMaterial").innerHTML,
				mounting: document.getElementById("mounting").innerHTML,
				deliveryTime: document.getElementById("deliveryTime").innerHTML,
				aoi: document.getElementById("aoi").innerHTML,
				materialGeneration: document.getElementById("materialGeneration").innerHTML,
				receivingAddressId: document.getElementById("receivingAddressId").innerHTML,
				generationTime: document.getElementById("generationTime").innerHTML,
				remark: document.getElementById("remark").innerHTML,
				phone: localStorage.getItem(LOCAL_USER_INFO)
			};
			if(orderInfo.boardCount == "" ||
				orderInfo.processMaterial == "" ||
				orderInfo.mounting == "" ||
				orderInfo.deliveryTime == "" ||
				orderInfo.materialGeneration == "" ||
				orderInfo.receivingAddressId == 0) {
				flag = false;
			}	
			alert(JSON.stringify(orderInfo));
			
			if(flag) {
				//下单
				mui.ajax(ip + '/order/placeAnOrder', {
					data: JSON.stringify(orderInfo),
					dataType: 'json', //服务器返回json格式数据
					type: 'post', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒
					headers: {
						'Content-Type': 'application/json'
					},
					success: function(data) {
						//服务器返回响应，根据响应结果，分析是否登录成功；
						if(data.data.code == OPERATION_SUCCESS) {
							alert(data.data.msg);
							
							//下单成功！
							location.reload();
						}
					},
					error: function(xhr, type, errorThrown) {
						//异常处理；
						mui.toast("系统异常！");
					}
				});
			} else {
				if(orderInfo.receivingAddressId == 0) {
					alert("请您选择地址，或去添加地址！");
				} else {
					if(document.getElementById("boardCount").innerHTML == "") {
						mui.toast("请您输入板子数量");
					} else if(document.getElementById("processMaterial").innerHTML == "") {
						mui.toast("您未填写工艺材料");
					} else if(document.getElementById("deliveryTime").innerHTML == "") {
						mui.toast("您未填写交期");
					}
				}
			}
		});
		document.getElementById("addresses").addEventListener('tap', function() {
			mui.ajax(ip + '/address/selectAll/' + localStorage.getItem(LOCAL_USER_INFO), {
				type: 'get', //HTTP请求类型
				timeout: 10000, //超时时间设置为10秒
				success: function(data) {
					if(data.data.length == 0) {
						location.href = "../mainInfo/address/insertAddress.html";
					}
				},
				error: function(xhr, type, errorThrown) {
					//异常处理
					mui.toast("系统异常！");
				}
			});
		});
	</script>

</html>